<template>
  <el-row :gutter="20">
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
    <el-col :xs="24" :sm="20">
      <el-container style="opacity: 0.9;display: block" class="message">
        <el-card class="animate__animated animate__fadeInLeft publish">

          <el-form :model="messageForm" :rules="rules" ref="messageFormRef" label-width="68px">
            <el-row :span="24" :gutter="20">
              <el-col style="border: 1px solid transparent" :span="8">
              </el-col>
              <el-col :span="4">
                <el-form-item label="日期" prop="workDate" >
                  <el-date-picker
                    style="width: 140px"
                    clearable size="small"
                    v-model="messageForm.workDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="校区" prop="studentId">
                  <el-select style="width: 140px" v-model="messageForm.studentId" @change="getSelectStudent"
                             placeholder="请选择校区" filterable clearable>
                    <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                               :value="item.studentId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col style="border: 1px solid transparent" :span="8">

              </el-col>
            </el-row>

            <el-row :span="24" :gutter="20">
              <el-col :span="8">
                <el-form-item label="1. 课程具体情况" prop="content1">
                  <el-input show-word-limit maxlength="200" type="textarea" :rows="8"
                            v-model="messageForm.content1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="2. 迟到信息统计" prop="content2">
                  <el-input show-word-limit maxlength="700" type="textarea" :rows="8"
                            v-model="messageForm.content2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="3. 客户到访统计" prop="content3">
                  <el-input show-word-limit maxlength="700" type="textarea" :rows="8"
                            v-model="messageForm.content3"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :span="24" :gutter="20">
              <el-col :span="8">
                <el-form-item label="4. 教学事故汇报" prop="content4">
                  <el-input show-word-limit maxlength="200" type="textarea" :rows="8"
                            v-model="messageForm.content4"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="5. 客户反馈建议" prop="content5">
                  <el-input show-word-limit maxlength="200" type="textarea" :rows="8"
                            v-model="messageForm.content5"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="6. 学生测试统计" prop="content6">
                  <el-input show-word-limit maxlength="200" type="textarea" :rows="8"
                            v-model="messageForm.content6"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :span="24" :gutter="20">
              <el-col :span="8">
                <el-form-item label="7. 单词考察统计" prop="content7">
                  <el-input show-word-limit maxlength="400" type="textarea" :rows="8"
                            v-model="messageForm.content7"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="8. 热线记录统计" prop="content8">
                  <el-input show-word-limit maxlength="400" type="textarea" :rows="8"
                            v-model="messageForm.content8"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="9. 其他事宜记录" prop="content">
                  <el-input show-word-limit maxlength="200" type="textarea" :rows="8"
                            v-model="messageForm.content9"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-row>
                <el-col :span="24" style="text-align: center">
                  <el-button type="primary" @click="publish">点击发表</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-card>
      </el-container>
    </el-col>
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
    <!-- 设置底部距离的 -->
    <el-backtop :bottom="60">
      <div style="
            height: 50px;
            width: 50px;
            background-color: rgba(240,239,241,1);
            box-shadow: 0 0 6px rgba(0,0,0, .12);
            text-align: center;
            line-height: 40px;
            border-radius:2px;
            color: #1989fa;
          "
      >
        <svg-icon icon-class="top"/>
      </div>
    </el-backtop>
  </el-row>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import {
  getToken
} from '@/utils/auth'
import Emoji from '@/components/Emoji'
import {addDailyWork} from "@/api/teach/dailyWork";
// import Tinymce from "@/components/Tinymce/index.vue";
import {listStudent, listStudentAll} from "@/api/teach/student";

export default {
  components: {
    // Tinymce,
    // Transition,
    // textOverflow,
    Emoji
  },
  name: 'message',
  data() {
    return {
      picList: [],
      default_avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      editing: false,
      show: true,
      messageList: [],
      //校区
      studentList: [],
      messageForm: {},
      rules:{
        workDate: [
          { required: true, message: '日期不能为空', trigger: 'blur' },
        ],
        studentId: [
          { required: true, message: '校区不能为空', trigger: 'blur' },
        ],
      },
      // 总条数
      total: 0,
    }
  },
  created() {
    // console.log(this.token)
    this.getStudentsList()
  },
  watch: {},
  updated: function () {
    this.$nextTick(function () {
      // 仅在整个视图都被渲染之后才会运行的代码
    })
  },
  computed: {
    ...mapGetters([
      'token',
      'avatar',
      'name'
    ])
  },
  methods: {
    // 发表
    publish() {
      this.$refs.messageFormRef.validate(async valid => {
        if (!valid) return

        let text = '课程具体情况:' + this.isContentUndefined(this.messageForm.content1) + '\n'
        text = text + '迟到信息统计:' + this.isContentUndefined(this.messageForm.content2) + '\n'
        text = text + '客户到访统计:' + this.isContentUndefined(this.messageForm.content3) + '\n'
        text = text + '教学事故汇报:' + this.isContentUndefined(this.messageForm.content4) + '\n'
        text = text + '客户反馈建议:' + this.isContentUndefined(this.messageForm.content5) + '\n'
        text = text + '学生测试统计:' + this.isContentUndefined(this.messageForm.content6) + '\n'
        text = text + '单词考察统计:' + this.isContentUndefined(this.messageForm.content7) + '\n'
        text = text + '热线记录统计:' + this.isContentUndefined(this.messageForm.content8) + '\n'

        this.messageForm.content = text + '其他事宜记录:' + this.messageForm.content9

        this.messageForm.createBy = this.$store.getters.name
        this.messageForm.type = '0'
        addDailyWork(this.messageForm).then(response => {
          // console.log(response)
          this.$modal.msgSuccess('提交成功')
          // location.reload()
          this.messageForm.content1 = null
          this.messageForm.content2 = null
          this.messageForm.content3 = null
          this.messageForm.content4 = null
          this.messageForm.content5 = null
          this.messageForm.content6 = null
          this.messageForm.content7 = null
          this.messageForm.content8 = null
          this.messageForm.content9 = null
          this.messageForm.content = null
          this.messageForm.workDate = null
          this.messageForm.studentId = null
        })
      })
    },
    /* 得到所选校区的信息 */
    getSelectStudent(val) {
      let obj = this.studentList.find(item => item.studentId === val)
      this.messageForm.schoolArea = obj.studentName
    },
    /** 查询校区信息列表 */
    getStudentsList() {
      listStudentAll(this.queryStudentParams).then(response => {
        this.studentList = response.rows;
        // console.log(this.studentList);
      });
    },
    isContentUndefined(val) {
      if (val === undefined || val === '') {
        return '无'
      }
      return val
    }
  }
}
</script>

<style scoped>
.elementCollapse {
  width: 98%;
  height: 100%;
  margin: 0 auto;
  padding-top: 0.1rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.collapseBtn {
  width: 100%;
  height: 2vh;
  line-height: 2vh;
  text-align: center;
  font-size: 12px;
  color: #000;
  cursor: pointer;
}

.collapseHeaderBox {
  height: calc(100% - 2vh);
}

.collapseHeader {
  background-color: #fff;
}

.publish {
  margin-bottom: 20px;
}

.author {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.nkname {
  margin: 10px;
  max-width: 530px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
